<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { useUserStore } from '@/store/modules/user';
import { getToken } from '@/utils/auth';

// 检查当前页面是否是登录页
const isLoginPage = () => {
  // #ifdef H5
  return window.location.hash.includes('/pages/login');
  // #endif

  // #ifndef H5
  const pages = getCurrentPages();
  return pages.length > 0 && pages[pages.length - 1].route === '/pages/login';
  // #endif
}

// 初始化应用
const initApp = () => {
  const token = getToken();
  const isLogin = isLoginPage();

  if (token) {
    if (isLogin) {
      // 有token且在登录页，跳转到首页
      uni.reLaunch({ url: '/pages/index/index', });
    }
    // 获取用户信息
    if (useUserStore().roles.length === 0) {
      useUserStore().getInfo();
    }
  } else {
    if (!isLogin) {
      // 没有token且不在登录页，跳转到登录页
      uni.reLaunch({ url: '/pages/login', });
    }
  }
}

onLaunch(() => {
  initApp();
});

onShow(() => { });

onHide(() => {
});

</script>

<style lang="scss">
// 导入全局样式
// @use '@/static/scss/index.scss';
@use '@/styles/index.scss';

/* 自定义底部导航栏样式 */
.uni-tabbar {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(30rpx) !important;
  border-top: 1rpx solid rgba(102, 126, 234, 0.1) !important;
  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08) !important;
  position: relative !important;

  /* 导航项样式 */
  .uni-tabbar__item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;

    &.uni-tabbar__item--active {
      transform: translateY(-3rpx) !important;

      /* 激活状态的背景 */
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80rpx;
        height: 80rpx;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        z-index: -1;
      }

      /* 激活状态的图标容器 */
      .uni-tabbar__icon {
        transform: scale(1.15) !important;
        position: relative !important;

        /* 激活状态的图标 */
        .uni-tabbar__icon-img {
          filter: drop-shadow(0 6rpx 12rpx rgba(102, 126, 234, 0.4)) !important;
        }

        /* 图标光晕效果 */
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 60rpx;
          height: 60rpx;
          background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 60%);
          border-radius: 50%;
          z-index: -1;
        }
      }

      /* 激活状态的文字 */
      .uni-tabbar__label {
        font-weight: 700 !important;
        color: #667eea !important;
        text-shadow: 0 2rpx 4rpx rgba(102, 126, 234, 0.3) !important;
        transform: scale(1.05) !important;
      }

      /* 添加顶部激活指示器 */
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50rpx;
        height: 6rpx;
        background: linear-gradient(90deg, #667eea, #764ba2);
        border-radius: 0 0 6rpx 6rpx;
        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.5);
      }
    }

    /* 图标容器 */
    .uni-tabbar__icon {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      margin-bottom: 6rpx !important;
      position: relative !important;
    }

    /* 文字样式 */
    .uni-tabbar__label {
      font-size: 22rpx !important;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      letter-spacing: 0.5rpx !important;
      color: #999999 !important;
      font-weight: 500 !important;
    }

    /* 点击效果 */
    &:active {
      transform: translateY(-1rpx) scale(0.96) !important;

      .uni-tabbar__icon {
        transform: scale(0.92) !important;
      }

      .uni-tabbar__label {
        transform: scale(0.95) !important;
      }
    }

    /* 悬停效果（仅在支持的平台） */
    &:hover {
      .uni-tabbar__icon {
        transform: scale(1.05) !important;
      }

      .uni-tabbar__label {
        color: #667eea !important;
      }
    }
  }
}

/* 针对不同平台的适配 */
/* #ifdef APP-PLUS */
.uni-tabbar {
  padding-bottom: env(safe-area-inset-bottom) !important;
}
/* #endif */

/* #ifdef H5 */
.uni-tabbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 998 !important;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.uni-tabbar {
  border-radius: 20rpx 20rpx 0 0 !important;
  margin: 0 20rpx !important;
  width: calc(100% - 40rpx) !important;
}
/* #endif */

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .uni-tabbar {
    .uni-tabbar__item {
      .uni-tabbar__label {
        font-size: 20rpx !important;
      }

      &.uni-tabbar__item--active::before {
        width: 32rpx !important;
        height: 3rpx !important;
      }
    }
  }
}

/* 动画效果 */
@keyframes tabbar-activate {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-6rpx) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-3rpx) scale(1.15);
    opacity: 1;
  }
}

@keyframes tabbar-glow {
  0% {
    box-shadow: 0 0 0 rgba(102, 126, 234, 0);
  }
  50% {
    box-shadow: 0 0 20rpx rgba(102, 126, 234, 0.4);
  }
  100% {
    box-shadow: 0 6rpx 12rpx rgba(102, 126, 234, 0.4);
  }
}

@keyframes tabbar-indicator {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 60rpx;
    opacity: 0.8;
  }
  100% {
    width: 50rpx;
    opacity: 1;
  }
}

.uni-tabbar .uni-tabbar__item.uni-tabbar__item--active {
  .uni-tabbar__icon {
    animation: tabbar-activate 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;

    .uni-tabbar__icon-img {
      animation: tabbar-glow 0.5s ease-out !important;
    }
  }

  &::before {
    animation: tabbar-indicator 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* 页面切换时的过渡效果 */
.uni-tabbar .uni-tabbar__item {
  &:not(.uni-tabbar__item--active) {
    .uni-tabbar__icon {
      opacity: 0.7 !important;
      transition: all 0.3s ease !important;
    }

    .uni-tabbar__label {
      opacity: 0.8 !important;
      transition: all 0.3s ease !important;
    }
  }
}
</style>
